<template>
  <div class="head-top">
    <div class="top">
      <div class="left">
        <van-icon name="location-o" />
        <span class="city">幸福小区(北一区东南门)</span>
      </div>
      <div class="right">
        <van-icon name="shopping-cart-o" />
        <van-icon class="msg" name="chat-o" />
      </div>
    </div>
    <form action="/">
      <van-search
        shape="round"
        background="#1faff3" 
        placeholder="请输入搜索关键词"
        @focus="onSearch"
      >
      </van-search>
    </form>
    <div class="search-recommend">
        <van-tag v-for="item in recomments" :key="item.value" round type="primary">{{ item.label }}</van-tag>
    </div>
  </div>
   <!-- 搜索组件 -->
  <transition name="fade">
    <OpSearch v-if="searchValue" @search="searchClick" @cencel="searchValue = false" />
  </transition>  
  
</template>

<script lang="ts" setup>

//import type { IHomeInfo } from "@/types";
import type { ISerachRecomment } from "@/types";
import { ref, defineProps, defineEmits } from "vue";
import OpSearch from "@/components/OpSearch.vue";
//import { useDebounce } from "@/use/useDebounce";
import { showToast } from "vant";
//import { useAsync } from "@/use/useAsync";
//import { fatchHomePageData } from "@/api/home";

const searchValue = ref(false)

// 发送请求方法 fatchHomePageData : api / IHomeInfo : 类型 
//const  { data, pending } =  useAsync(fatchHomePageData,{} as IHomeInfo)

// 子组件接收父组件传递过来的值
const props = defineProps<IProps>();
interface IProps{
    recomments:ISerachRecomment[]
}


interface IEmits{
  (e:'search'):void
}

// 子组件触发父组件的事件
const emits = defineEmits<IEmits>();



const onSearch = () => {
  searchValue.value = true;
};

const searchClick = (value: string) => {
  searchValue.value = false;



  showToast({
    message: `搜索${value}`,
    duration: 1000,
    forbidClick: true,
  });
} 

// watch(searchValue, useDebounce((value) => {
//   if (value) {
//     searchValue.value = false;
//   }
//   searchClick(value);
// },1000));


</script>

<style lang="scss" scoped>
.head-top {
  color: #fff;
  overflow: hidden;
  background: #1faff3;
  //background: linear-gradient(to right, rgba(53, 200, 250), rgba(31, 175, 243));
  .top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-items: center;
    padding: 10px;
    font-size: 20px;
    font-weight: bold;
    box-sizing: border-box;
    justify-content: space-between;
    .city {
      padding-left: 5px;
      font-size: 13px;
      font-weight: 100;
    }
    .msg {
      padding-left: 20px;
    }
  }
  .search-recommend{
    padding: 0 10px 10px;
    display: flex;
    .van-tag{
        font-size: 12px;
        padding: 2px 10px;
        margin-right: 10px;
    }
  }
  .search-btn{
    color: #fff;
    font-size: 16px;
  }
  :deep .van-search__action:active {
    background: #1faff3;
  }
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

</style>
